<template>
	<a-col :span="colSpan" v-if="itemType === 'all' || itemType === 'company'">
		<a-form-item label="委托公司" name="companyCode">
			<a-select
				v-model:value="searchFormState.companyCode"
				placeholder="请选择委托公司"
				:options="companyList"
				allowClear
				@change="changeCompany"
			/>
		</a-form-item>
	</a-col>
	<a-col :span="colSpan" v-if="itemType === 'all' || itemType === 'product'">
		<a-form-item label="所属产品" name="productCode">
			<a-select
				v-model:value="searchFormState.productCode"
				placeholder="请选择所属产品"
				:options="productList"
				@change="changeProduct"
			/>
		</a-form-item>
	</a-col>
	<a-col :span="colSpan" v-if="itemType === 'all' || itemType === 'project'">
		<a-form-item label="所属项目" name="projectCode">
			<a-select
				v-model:value="searchFormState.projectCode"
				placeholder="请选择所属项目"
				:options="projectList"
				@change="changeProject"
				show-search
				:filter-option="filterOption"
				allow-clear
			/>
			<span v-show="foundsIsShow" class="founds">
				<span> 短信可用余额： </span>
				<span> ￥{{ foundsInfo.foundsAvailable }} </span>
			</span>
		</a-form-item>
	</a-col>
</template>
<script setup>
	import companyApi from '@/api/tjzy/company/companyApi'
	import productApi from '@/api/tjzy/product/productApi'
	import projectApi from '@/api/tjzy/project/projectApi'
	import foundsApi from '@/api/tjzy/project/foundsApi'
	import { useRoute } from 'vue-router'

	const props = defineProps({
		itemType: String,
		colSpan: {
			type: Number,
			default: 5
		},
		isReset: {
			type: Boolean,
			default: false
		},
		dataForm: {
			companyCode: undefined,
			productCode: undefined,
			projectCode: undefined
		}
	})
	const emit = defineEmits(['change-company-select-event'])
	const route = useRoute()
	const searchFormState = ref({
		companyCode: undefined,
		productCode: undefined,
		projectCode: undefined
	})
	const companyList = ref([])
	const productList = ref([])
	const projectList = ref([])
	let foundsInfo = ref({
		foundsAvailable: 0
	})
	let foundsIsShow = ref(false)
	const changeCompany = (val) => {
		if (props.itemType === 'all') {
			productApi.listAllProduct(val, false).then((res) => {
				productList.value = res
				searchFormState.value.productCode = undefined
				searchFormState.value.projectCode = undefined
			})
		}
		searchFormState.value.companyCode = val
		emit('change-company-select-event', searchFormState.value)
	}
	const changeProduct = (val) => {
		if (props.itemType === 'all') {
			projectApi.listAllProject(val, false).then((res) => {
				projectList.value = res
				searchFormState.value.projectCode = undefined
			})
		}
		searchFormState.value.productCode = val
		emit('change-company-select-event', searchFormState.value)
	}
	const changeProject = (val) => {
		searchFormState.value.projectCode = val
		//短信发送页面导入弹框项目显示可用余额
		if (route.name === 'smsBatch') {
			foundsApi.getAvaliableByCode(val).then((res) => {
				foundsInfo.value = res
				foundsIsShow.value = true
			})
		}
		emit('change-company-select-event', searchFormState.value)
	}
	const filterOption = (input, option) => {
		return option.label.toLowerCase().includes(input.toLowerCase())
	}
	watch(
		() => props.isReset,
		(newVal) => {
			if (newVal) {
				searchFormState.value.companyCode = undefined
				searchFormState.value.productCode = undefined
				searchFormState.value.projectCode = undefined
			}
		}
	)
	onMounted(() => {
		if (props.itemType === 'all' || props.itemType === 'company') {
			companyApi.listCompany('').then((res) => {
				companyList.value = res
			})
		}
		if (props.itemType === 'product') {
			productApi.listAllProduct('', false).then((res) => {
				productList.value = res
			})
		}
		if (props.itemType === 'project') {
			projectApi.listAllProject('', false).then((res) => {
				projectList.value = res
			})
		}
		Object.assign(searchFormState.value, props.dataForm)
		// if (props.itemType === 'product') {
		// 	getProductList(false, '').then((res) => {
		// 		projectList.value = res
		// 	})
		// }
		// if (props.itemType === 'project') {
		// 	getProjectList(false, '').then((res) => {
		// 		projectList.value = res
		// 	})
		// }
	})
</script>
<style lang="less" scoped>
	.founds {
		padding-left: 12px;

		span:nth-child(1) {
			color: #00000073;
		}

		span:nth-child(2) {
			color: #ed5c38;
			font-weight: 600;
		}
	}
</style>
